<template>
	<view class="main">
		<!-- 公共头部 -->
		<headerPublic style="position: fixed;" title="会议通知" />
		<view class="page-content outbottom">
			<van-tabs v-model:active="active" title-active-color="#2D75D7" color="#2D75D7" @change="switchTabs">
				<van-tab v-for="(item, index) in tabList" :key="index">
					<template slot="title">
						{{item.title}}
						<van-badge class="nv-badge" :content="item.unread" v-show="item.unread!=0">
						</van-badge>
					</template>
					<van-search v-model="searchWord" placeholder="搜索" @search="onSearch" @cancel="onCancel" />
					<van-list
						v-model:loading="loading"
						:finished="finished"
						finished-text="没有更多了"
						@load="onLoadList"
					>
						<view class="list-card" v-for="item, index in list" :key="index">
							<view class="list-card-header">
								<view v-if="active==0">
									<!-- receiptStatus回执状态:UNDO(0, "未回执"), DONE(1, "已回执"), NONE(2, "无需回执") -->
									<van-tag v-if="item.receiptStatus=='UNDO'" plain size="large" type="danger">待回执</van-tag>
									<van-tag v-else-if="item.receiptStatus=='DONE'" plain size="large" type="warning">已回执</van-tag>
									<van-tag v-else-if="item.receiptStatus=='NONE'" plain size="large" type="warning">无需回执</van-tag>
								</view>
								<view v-else-if="active==1">
									<!-- 流程状态:DRAFT(0, "草稿"), UNDO(1, "在办(送审)"), DONE(2, "办结(发布信息)"), AUDIT(6, "审批中"), AUDITED(7, "已审批"), FINISH(8, "已归档(已发送)"), REBACK(9, "已撤回") -->
									<van-tag v-if="item.businessStatus=='DRAFT'" plain size="large">草稿</van-tag>
									<van-tag v-else-if="item.businessStatus=='UNDO'" plain size="large" type="warning">在办</van-tag>
									<van-tag v-else-if="item.businessStatus=='DONE'" plain size="large" type="success">办结</van-tag>
									<van-tag v-else-if="item.businessStatus=='AUDIT'" plain size="large">审批中</van-tag>
									<van-tag v-else-if="item.businessStatus=='AUDITED'" plain size="large" type="success">已审批</van-tag>
									<van-tag v-else-if="item.businessStatus=='FINISH'" plain size="large">归档</van-tag>
									<van-tag v-else-if="item.businessStatus=='REBACK'" plain size="large">撤回</van-tag>
								</view>
								<view v-else-if="active==2">
									<!-- 办理状态:DRAFT(0, "待办"), UNDO(1, "办理中"), DONE(2, "办结"), REBACK(9, "已撤回"); -->
									<van-tag v-if="item.status=='DRAFT'" plain size="large">待办</van-tag>
									<van-tag v-else-if="item.status=='UNDO'" plain size="large" type="warning">办理中</van-tag>
									<van-tag v-else-if="item.status=='DONE'" plain size="large" type="success">办结</van-tag>
									<van-tag v-else-if="item.status=='REBACK'" plain size="large">撤回</van-tag>
								</view>
							</view>
							<view class="list-card-content">
								<text>{{item.title}}</text>
								<view class="list-card-content-desc">
									<p><span>承办部门：</span>{{item.deptName}}</p>
									<p><span>承办人：</span>{{item.createBy}}</p>
									<p><span>发起日期：</span>{{item.createTime}}</p>
								</view>
							</view>
							<van-divider :hairline="false" style="margin: 10px 0;" />
							<view v-if="active==0" class="list-card-footer">
								<van-button class="list-card-footer-button" color="#2D75D7" round size="small" @click="goToDetail(item.id, 0, 0)">立即查看</van-button>
							</view>
							<view v-else-if="active==1" class="list-card-footer">
								<van-button v-show="['AUDITED'].includes(item.businessStatus)" class="list-card-footer-button" color="#2D75D7" round size="small" @click="goToDetail(item.businessId, 1, 1)">立即办理</van-button>
								<van-button v-show="['REBACK','DRAFT'].includes(item.businessStatus)" class="list-card-footer-button" color="#2D75D7" round size="small" @click="goToNew(item.businessId)">立即办理</van-button>
								<van-button v-show="['UNDO','AUDIT','DONE','FINISH'].includes(item.businessStatus)" class="list-card-footer-button" plain color="#2D75D7" round size="small" @click="goToDetail(item.businessId, 0, 1)">查看详情</van-button>
								<van-button v-show="['UNDO','AUDIT'].includes(item.businessStatus)" class="list-card-footer-button" plain color="#2D75D7" round size="small" @click="goReback(item.businessId)">撤回</van-button>
							</view>
							<view v-else-if="active==2" class="list-card-footer">
								<van-button v-show="['DRAFT','UNDO'].includes(item.status)" class="list-card-footer-button" color="#2D75D7" round size="small" @click="goToDetail(item.id, 1, 2)">立即办理</van-button>
								<van-button v-show="['DONE','REBACK'].includes(item.status)" class="list-card-footer-button" plain color="#2D75D7" round size="small" @click="goToDetail(item.id, 0, 2)">查看详情</van-button>
							</view>
						</view>
					</van-list>
				</van-tab>
			</van-tabs>
		</view>
		<view class="fixed">
			<van-button class="fixed-button" color="#2D75D7" round @click="goToNew()">新建</van-button>
		</view>
	</view>
</template>

<script>
import { getreadNum } from '../../../api/common'
import { auditPages, auditReback, noticeInfoPages, taskInfoPages } from '../../../api/meetingNoticeApi'
export default {
	data() {
		return {
			active: 1,
			tabList: [
				{ title: '我参与的', unread: 0 },
				{ title: '我发起的', unread: 0 },
				{ title: '我审批的', unread: 0 }
			],
			searchWord: '',
			loading: false,
			finished: false,
			list: [],
			pageNum: 1,
			timer: null // 定时器管理器实例
		}
	},
	onShow() {
		this.switchTabs(this.active)
		this.startReadNumTimer()
	},
	methods: {
		startReadNumTimer() {
			this.updateReadNum()
			// 清除可能存在的定时器
			this.clearReadNumTimer()
			// 设置新的定时器
			this.timer = setInterval(() => {
				this.updateReadNum()
			}, 5000)
		},
		updateReadNum(){
			getreadNum().then(res => {
				if (res.code == 200 && res.data) {
					this.tabList[0].unread = res.data["UN_READ_COUNT_MEETING"]?.count || 0;
					this.tabList[2].unread = res.data["UN_HANDLE_COUNT_MEETING"]?.count || 0;
				}
			}).catch(error => {
				this.clearReadNumTimer();
			});
		},
		// 清除定时器方法
		clearReadNumTimer() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		onSearch(){
			this.switchTabs(this.active)
		},
		onCancel(){
			this.searchWord = ''
		},
		onLoadList(){
			const params = {
				pageNum: this.pageNum,
				pageSize: 10,
				businessType: 'MEETING',
				title: this.searchWord
			}
			if(this.active==1){
				auditPages(params).then(res=>{
					this.list.push(...res.data.records)
					this.loading = false
					if(this.list.length>=res.data.total){
						this.finished = true
					}else{
						this.pageNum+=1
					}
				})
			}else if(this.active==0){
				noticeInfoPages(params).then(res=>{
					this.list.push(...res.data.records)
					this.loading = false
					if(this.list.length>=res.data.total){
						this.finished = true
					}else{
						this.pageNum+=1
					}
				})
			}else if(this.active==2){
				taskInfoPages(params).then(res=>{
					this.list.push(...res.data.records)
					console.log(this.list)
					this.loading = false
					if(this.list.length>=res.data.total){
						this.finished = true
					}else{
						this.pageNum+=1
					}
				})
			}
		},
		goToNew(businessId=null){
			uni.navigateTo({
				url: `/pages/meeting/notice/new`+(businessId?`?businessId=${businessId}`:'')
			})
		},
		goToDetail(id, type, way){
			uni.navigateTo({
				url: `/pages/meeting/notice/detail?id=${id}&type=${type}&way=${way}`
			})
		},
		switchTabs(active){
			console.log('switchTabs', active)
			this.pageNum = 1
			this.list = []
			this.loading = true
			this.finished = false
			this.onLoadList()
		},
		goReback(id){
			auditReback(id).then(res=>{
				uni.showToast({
					title: '撤回成功',
					icon: 'success'
				})
				setTimeout(()=>{
					this.switchTabs(this.active)
				}, 800)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.main {
	background-color: #f5f5f5;
	min-height: 100vh;
}
.list-card {
	background-color: #fff;
	margin: 15px;
	padding: 15px;
	border-radius: 5px;
	&-header {
		display: flex;
		flex-direction: row-reverse;
	}
	&-content {
		text {
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 10px;
		}
		&-desc {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			width: 90%;
			margin-top: 13px;
			p {
				line-height: 26px;
				font-size: 14px;
				span {
					color: #999999;
				}
			}
		}
	}
	&-footer {
		display: flex;
		flex-direction: row-reverse;
		&-button {
			height: 26px;
			width: 80px;
			margin-left: 10px;
		}
	}
}
.fixed {
	position: fixed;
	bottom: 60px;
	right: 20px;
	&-button{
		color: white;
		background: rgb(45, 117, 215);
		border-color: rgb(45, 117, 215);
		box-shadow: 3px 3px 5px black;
		height: 60px;
		width: 60px;
	}
}
.outbottom {
	margin-top: 88rpx;
}
.list-card-header{
	::v-deep .van-tag--danger.van-tag--plain {
		color: #ee0a24;
		background-color: #FFEFEF;
	}
	::v-deep .van-tag--warning.van-tag--plain {
	    color: #CE9410;
	    background-color: #FFF1D2;
	}
	::v-deep .van-tag--success.van-tag--plain {
	    color: #07c160;
		background-color: #EBFFE5;
	}
}
.nv-badge{
	position: absolute;
	top: 7px;
}
</style>